//表接口列表
import { Space, Checkbox, Input, Row, Tooltip } from 'antd'
import { useEffect, useState } from 'react'

export default (props) => {
  const {onChange, value} = props;
  // let value = 'admin:list~create,user:create,open:list~update';
  const [data, setData] = useState({})

  let options = [
    {value: 'details', label: '详情'},
    {value: 'list', label: '列表'},
    {value: 'batch', label: '批量列表'},
    {value: 'create', label: '创建'},
    {value: 'update', label: '更新'},
    {value: 'delete', label: '删除'},
    {value: 'option', label: '选项'},
    {value: 'exportExcel', label: '导出Excel'},
    {value: 'importExcel', label: '导入Excel'},
  ]

  let groups = [
    {name: 'guest', defaultTargetName: '', 'title': '访客', options: options},
    {name: 'admin', defaultTargetName: 'admin_id', 'title': '平台管理', options: options},
    {name: 'user', defaultTargetName: 'user_id', title: '用户中心', options: options},
    {name: 'open', defaultTargetName: 'open_id', title: '开放平台', options: options}
  ]

  useEffect(()=>{
    let dataValues = {};
    if(value) {
      let parts = value.split('~')
      parts.forEach((item=>{
        let [targetPart, optionStr] = item.split('.')
        let [name, targetName] = targetPart.split('/')
        if(!targetName) {
          let item = groups.find(value1 => {
            return value1.name === name
          })
          targetName = item.defaultTargetName;
        }
        options = optionStr ? optionStr.split('/') : []
        if(options.length>0) {
          dataValues[name] = {values: options, targetName};
        }
      }))
    }
    setData(dataValues)
  }, [value])

  //值变动更新
  const changed = (values, item, targetName) => {
    let tName = (targetName !== null && targetName !== undefined) ? targetName : (data[item.name]? data[item.name].targetName : item.name + '_id')
    let v = values != null ? values : (data[item.name] ? data[item.name].values : [])
    let newData = {...data, [item.name]: {values: v, targetName: tName}}

    setData(newData)
    //解析成字符串
    let str = '';
    let parts = []
    Object.keys(newData).forEach(key=>{
      let item = newData[key]
      if(item?.values && item?.values?.length > 0) {
        parts.push(key + '/' + item.targetName + '.' + item.values.join('/'))
      }
    })
    str = parts.join('~');
    if(onChange) {
      onChange(str)
    }
  }

  const indeterminate = (name) => {
    let checkeds = data[name]
    let item =  groups.find(g => g.name === name);
    return (checkeds && checkeds.values?.length > 0 && checkeds.values.length !== item.options.length)
  }

  const checked = (name) => {
    let checkeds = data[name]
    let item =  groups.find(g => g.name === name);
    return (checkeds && checkeds.values?.length > 0 && checkeds.values?.length === item.options.length)
  }

  const checkedAll = (name, v) => {
    let item =  groups.find(g => g.name === name);
    let newValue = []
    if(v.target.checked) {
      let values = item.options.map(item=>item.value);
      // newValue = {...data, [name]: values};
      newValue = values;

    }
    // setData(newValue)
    changed(newValue, {name: name})
  }

  return <div>
    {groups.map(item => <Row style={{marginBottom: '10px'}}>
        <Space>
          <span>{item.title}:</span>
          <Tooltip title={"对应角色用户ID字段"}><Input style={{width: '80px'}} value={data[item.name]?.targetName}
            onChange={(e)=>{
              changed(data[item.name]?.values, item, e.target.value)
            }}
          /></Tooltip>
          <Checkbox indeterminate={indeterminate(item.name)} onChange={(v)=>{checkedAll(item.name, v)}} checked={checked(item.name)} />全选
          <Checkbox.Group options={item.options} value={data[item.name]?.values || []} onChange={(v) =>{
            changed(v, item)
          }} />
        </Space>
      </Row>)}

  </div>
}
